<div class="home">
    <div class="introduction">
        <h1>The Most Complete User Interface Suite</h1>
        <h2>for Angular</h2>
        
        <a class="home-button" [routerLink]="['/setup']">
            GET STARTED
        </a>
    </div>
    
    <div class="features">
        <h3>Why PrimeNG?</h3>
        <p class="features-tagline">Congratulations! 🎉 Your quest to find the UI library for Angular is complete.</p>
        
        <p style="features-description">PrimeNG is a collection of rich UI components for Angular. All widgets are open source and free to use under MIT License. PrimeNG is developed by <a href="http://www.primetek.com.tr">PrimeTek Informatics</a>, 
            a vendor with years of expertise in developing open source UI solutions. For project news and updates, please follow us on <a href="https://twitter.com/prime_ng">twitter</a> and visit our <a href="https://www.primefaces.org/category/primeng/">blog</a>.</p>
        
        <div class="ui-g">
            <div class="ui-g-12 ui-md-4">
                <img src="assets/showcase/images/home/icon-component.svg" />
                <span class="feature-name">70+ COMPONENTS</span>
                <p>The most complete set of native widgets featuring 70+ easy to use components for all your UI requirements.</p>
            </div>
            <div class="ui-g-12 ui-md-4">
                <img src="assets/showcase/images/home/icon-opensource.svg" />
                <span class="feature-name">OPEN SOURCE</span>
                <p>Hosted at <a href="">GitHub</a>, all widgets are open source and free to use under MIT license. Feel the power of open source.</p>
            </div>
            <div class="ui-g-12 ui-md-4">
                <img src="assets/showcase/images/home/icon-themes.svg" />
                <span class="feature-name">PRODUCTIVITY</span>
                <p>Allocate your valuable time on business logic rather than dealing with the complex user interface requirements.</p>
            </div>
            <div class="ui-g-12 ui-md-4">
                <img src="assets/showcase/images/home/icon-productive.svg" />
                <span class="feature-name">THEMES</span>
                <p>Don’t get tied up in just one look&feel. Choose from a variety of options including material and flat design.</p>
            </div>
            <div class="ui-g-12 ui-md-4">
                <img src="assets/showcase/images/home/icon-mobile.svg" />
                <span class="feature-name">TEMPLATES</span>
                <p>Professionally designed highly customizable native Angular CLI application templates to get started in no time. </p>
            </div>
            <div class="ui-g-12 ui-md-4">
                <img src="assets/showcase/images/home/icon-templates.svg" />
                <span class="feature-name">MOBILE</span>
                <p>Enhanced mobile user experience with  touch optimized responsive design elements.</p>
            </div>
        </div>
    </div>
    
    <div class="whouses">
        <h3>Key Users</h3>
        <p>Open source products of <a href="http://www.primetek.com.tr">PrimeTek</a> are used all around the world by 1M+ developers in corporations, government and educational
            institutions.</p>
        <div class="ui-g">
            <div class="ui-g-3 ui-md-2"><img src="assets/showcase/images/home/airbus.svg"></div>
            <div class="ui-g-3 ui-md-2"><img src="assets/showcase/images/home/amex.svg"></div>
            <div class="ui-g-3 ui-md-2"><img src="assets/showcase/images/home/bmw.svg"></div>
            <div class="ui-g-3 ui-md-2"><img src="assets/showcase/images/home/ebay.svg"></div>
            <div class="ui-g-3 ui-md-2"><img src="assets/showcase/images/home/ford.svg"></div>
            <div class="ui-g-3 ui-md-2"><img src="assets/showcase/images/home/fox.svg"></div>
            <div class="ui-g-3 ui-md-2"><img src="assets/showcase/images/home/lufthansa.svg"></div>
            <div class="ui-g-3 ui-md-2"><img src="assets/showcase/images/home/mercedes.svg"></div>
            <div class="ui-g-3 ui-md-2"><img src="assets/showcase/images/home/sap.svg"></div>
            <div class="ui-g-3 ui-md-2"><img src="assets/showcase/images/home/unicredit.svg"></div>
            <div class="ui-g-3 ui-md-2"><img src="assets/showcase/images/home/verizon.svg"></div>
            <div class="ui-g-3 ui-md-2"><img src="assets/showcase/images/home/viacom.svg"></div>
        </div>
    </div>
    
    <div class="templates">
        <h3>Premium Application Templates for PrimeNG</h3>
        <p>Based on Angular CLI, create awesome applications in no time using the premium templates 
            of PrimeNG and impress your users.</p>
        
        <div class="ui-g">
            <div class="ui-g-12">
                <a href="https://www.primefaces.org/layouts/paradise-ng">
                    <img alt="Paradise" src="assets/showcase/images/layouts/paradise-ng.png"> 
                </a>
            </div>
            <div class="ui-g-12 ui-md-4">
                <a href="https://www.primefaces.org/layouts/ultima-ng">
                    <img alt="Ultima" src="assets/showcase/images/layouts/ultima-ng.png"> 
                </a>
            </div>
            <div class="ui-g-12 ui-md-4">
                <a href="https://www.primefaces.org/layouts/barcelona-ng">
                    <img alt="Barcelona" src="assets/showcase/images/layouts/barcelona-ng.png"> 
                </a>
            </div>
            <div class="ui-g-12 ui-md-4">
                <a href="https://www.primefaces.org/layouts/morpheus-ng">
                    <img alt="Morpheus" src="assets/showcase/images/layouts/morpheus-ng.png"> 
                </a>
            </div>
            <div class="ui-g-12 ui-md-4">
                <a href="https://www.primefaces.org/layouts/atlantis-ng">
                    <img alt="Atlantis" src="assets/showcase/images/layouts/atlantis-ng.png"> 
                </a>
            </div>
            <div class="ui-g-12 ui-md-4">
                <a href="https://www.primefaces.org/layouts/poseidon-ng">
                    <img alt="Poseidon" src="assets/showcase/images/layouts/poseidon-ng.png"> 
                </a>
            </div>
            <div class="ui-g-12 ui-md-4">
                <a href="https://www.primefaces.org/layouts/omega-ng">
                    <img alt="Omega" src="assets/showcase/images/layouts/omega-ng.png"> 
                </a>
            </div>
        </div>
    </div>
    
    <div class="prosupport">
        <div class="ui-g">
            <div class="ui-g-12 ui-md-6">
                <h3>PrimeNG PRO Support</h3>
                <p>With PrimeNG PRO, it's easy to support, tune and add features to PrimeNG as if it were an in-house framework.</p>
                <p>PrimeNG PRO is a term based commercial support service. With the exclusive services of Pro account, you no longer need to post your questions in the community forum and your issues to community issue tracker.</p>
                <a class="home-button" [routerLink]="['./support']">READ MORE</a>
            </div>
            <div class="ui-g-12 ui-md-6">
                <img alt="PRO" src="assets/showcase/images/home/icon-pro.svg"> 
            </div>
        </div>
    </div>

    <div class="testimonials">
        <div>
            <h3>Testimonials</h3>
            <p>We have selected PrimeNG among the others because we feel it’s currently the most mature and complete Angular library out there.!! We were simply searching the component library not a directive library.</p>
            <i>Frank Kolar - SAP Ariba</i>
        </div>
    </div>
        
</div>